<template>
	<view>
		<!-- 状态栏 -->
		<view class="status_bar" style="background-color: #191919;position: sticky;top: 0;z-index: 999;"></view>

		<!-- 轮播 -->
		<view class="bg-white">
			<swiper class="swiper" indicator-color="rgba(255,255,255,0.8)" indicator-active-color="rgba(255,255,255,1)" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="i in carousel" :key="i.id">
					<view class="swiper-item">
						<image :src="i.picture" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- VIP -->
		<view class="padding-lr" style="background-color: #F5F5F5;">
			<view class="cu-list menu-avatar">
				<view class="cu-item card" style="background:linear-gradient(90deg, #d9a256 0%,#ffd063 100% );">
					<view class="cu-avatar round lg" :style="'background-image: url(' + userinfo.full_picture + ')'"></view>
					<view class="content flex-sub">
						<view class="text-white">
							{{userinfo.nickname||'未登录'}}
							<text class="vip text-xs level1" v-show="userinfo && userinfo.level>1">
								{{userinfo.level_name}}
							</text>
						</view>
						<view class="text-sm flex justify-between" style="color: #F2D6B3;position: relative;">
							<text v-show="userinfo && userinfo.level==1">你还未开通智惠云VIP</text>
							<text v-show="userinfo && userinfo.level>1">你已开通智惠云VIP</text>
							<view class="go" @click="paymentShow=true" v-show="userinfo && userinfo.level==1">
								立即开通>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 会员权益 -->
		<view class="padding rights">
			<view class="margin-left margin-tb text-lg text-bold">会员权益</view>
			
			<view class="list padding-lr">
				<view class="item">
					<image src="../../static/images/t21.png" mode=""></image>
					<view>充值激活，油卡尊享85折优惠</view>
				</view>
				<view class="item">
					<image src="../../static/images/t22.png" mode=""></image>
					<view>尊享商城惠民折扣商品</view>
				</view>
				<view class="item">
					<image src="../../static/images/t33.png" mode=""></image>
					<view>推广会员，赚收益，上不封顶</view>
				</view>
				<view class="item">
					<image src="../../static/images/t44.png" mode=""></image>
					<view>支持全网通和中国石油中国石化化充值服务</view>
				</view>
			</view>
		</view>
		
		<!-- 立即开通 -->
		<view class="padding-xl" v-show="userinfo && userinfo.level==1">
			<view class="padding-lr-xl">
				<my-btn class="round block" bg="linear-gradient(90deg, #e7c084 0%,#d38b24 100% )" @click.native="paymentShow=true">立即开通</my-btn>
			</view>
		</view>

		<!-- 联系客服 -->
		<view class="padding bg-white">
			<view class="margin-left margin-bottom text-lg text-bold">联系客服</view>

			<view class="kefu-list padding-lr">
				<view class="kefu padding-tb" v-for="i in wechat" :key="i.id">
					<view class="cu-avatar lg round margin-right" style="background-image: url('../../static/images/avatar1.png')"></view>
					<view class="info">
						<view class="text-bold">{{i.account}}</view>
						<view class="text-xs text-gray">客服微信</view>
					</view>
					<button class="cu-btn round" @click="showModal(i)">去咨询</button>
				</view>
				
				<view class="kefu padding-tb" v-for="i in mobile" :key="i.id">
					<view class="cu-avatar lg round margin-right" style="background-image: url('../../static/images/avatar2.png')"></view>
					<view class="info">
						<view class="text-bold">{{i.account}}</view>
						<view class="text-xs text-gray">客服电话</view>
					</view>
					<button class="cu-btn round" @click="phone(i.account)">去咨询</button>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='Modal'?'show':''" @tap="hideModal">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">微信号：{{wechatName}}</view>
				</view>
				<view class="padding-xl bg-white">
					<view class="qrimg">
						<image :src="wechatPic" style="width: 300rpx;height: 300rpx;"></image>
					</view>
					<view class="text-gray margin-top-lg">
						截图-微信扫一扫-相册 添加客服
					</view>
				</view>
				<u-icon name="close-circle" class="close margin-top-xl" color="#fff" size="80"></u-icon>
			</view>
		</view>

		<!-- 支付 -->
    <my-payment
      :show="paymentShow"
      @close="paymentShow = false"
      payUrl="/user/upgrade"
      @success="$goto('/pages/shop/paysuccess?type=upgrade')"
    ></my-payment>
	</view>
</template>

<script>
	import store from '@/store.js'
	export default {
		data() {
			return {
				modalName: null,
				carousel: [],
				wechatName: '',
				wechatPic: '',
				orderInfo: '',
				paymentShow: false
			}
		},
		computed: {
			userinfo: state => store.state.userinfo,
			mobile: state => store.state.userinfo.service.mobile,
			wechat: state => store.state.userinfo.service.wechat,
		},
		onLoad() {
			this.getData();
		},
		onShow() {
			this.$u.api.getUserinfo()
		},
		methods: {
			showModal(i) {
				this.modalName = 'Modal'
				this.wechatName = i.account
				this.wechatPic = i.full_picture
			},
			hideModal(e) {
				this.modalName = null
			},
			phone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			getData() {
				this.$u.get('/index/data?position=3').then(res => {
					let data = res.data.result
					
					let { notice, carousel } = data
					this.notice = notice.author + ':' + notice.content
					this.carousel = carousel
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cu-avatar {
		background-color: white;
	}
	
	.swiper {
		height: 330rpx;
		position: relative;
		z-index: 0;

		.swiper-item {
			width: 100%;
			height: 100%;
		}
	}
	
	.card {
		border-radius: 10rpx;
		margin-top: 30rpx;
		margin-bottom: -10rpx;
		height: 160rpx !important;
		letter-spacing: 2rpx;
		.go {
			position: absolute;
			right: 0;
			color: #956A1C;
			padding-right: 20rpx;
			transform: scale(1.2);
		}
	}
	
	.rights {
		.item {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
	}

	.kefu {
		display: flex;
		position: relative;
		z-index: 2;
		border-bottom: 1px solid #F7F7F7;

		.info {
			display: flex;
			flex-flow: column;
			justify-content: center;
		}

		.cu-btn {
			position: absolute;
			right: 15rpx;
			color: #fff;
			background-color: #E3B16B;
			top: 50%;
			transform: translate(0, -50%);
			z-index: 3;
		}
	}

	.cu-dialog {
		overflow: visible;

		.close {
			position: absolute;
			font-size: 80rpx;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -120rpx;
		}
	}
	
	.vip {
		min-width:62rpx;
		height:40rpx;
		background:rgba(120,120,120,1);
		border-radius:14rpx 0rpx 14rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		&.level0 {
			color: #1E1C1B;
			background-color: #787878;
		}
		&.level1 {
			background:linear-gradient(24deg,rgba(249,88,86,1) 0%,rgba(255,120,56,1) 53%,rgba(255,146,35,1) 100%);
		}
	}
</style>
